<template>
		<table border="0" cellspacing="0" cellpadding="0" class="rx-day">
      <thead>
        <tr>
          <td v-for="(item,index) in weeks" :key="index" class="weekitem">{{item}}</td>
        </tr>
      </thead>
				<tbody>
					<tr v-for="(week,index) in days" class="week" :class="{
            hoverable:chooseWeek
          }" :key="index">
						<td v-for="(item,index) in week" :key="index">
							<span class="day"
							:class="{'today': item.time===today
							,'choosed' : choosed&&(item.time===choosed.getTime())
							,'weekday': !item.weekend
							,'weekend':item.weekend
              ,'another':item.another
              ,'disabled':item.disabled
              ,'hover':item.hover}"
							 @click="onCilck(item)">{{item.name}}</span>
						</td>
					</tr>
				</tbody>
			</table>
</template>
<script>
import { getDays } from "../../../rxtools/src/ext/date";
//选择日期
export default {
  name: "rx-day",
  props: {
    date: {
      type: Date,
      default() {
        return new Date();
      }
    },
    choosed: {
      type: Date
    },
    min: {
      //最小日期（包含
      type: Date
    },
    max: {
      //最大日期（包含
      type: Date
    },
    chooseWeek: {
      type: Boolean,
      default: false
    },
    anotherVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    var today = new Date();
    return {
      weeks: ["一", "二", "三", "四", "五", "六", "日"],
      days: [],
      today: 0
    };
  },
  watch: {
    date(nval){
       this.onDateChange(nval)
    }
  },
  methods: {
    onCilck(item){
      if(item.disabled){
        return;
      }
      this.$emit('pick',new Date(item.time))
    }
  },
  created() {
    this.onDateChange=(nval)=>{
      // console.log(this.choosed ? this.choosed.getTime() : "");
      var date = this.date,
        year = date.getFullYear(),
        month = date.getMonth();
      var days = getDays(year, month),
        max = this.max ? this.max.getTime() : Infinity,
        min = this.min ? this.min.getTime() : 0;

      days.forEach(week => {
        week.forEach((item, index) => {
          var num = (index + 1) % 7;
          item.weekend = num == 6 || num == 0;
          if (item.time > max || item.time < min) {
            item.disabled = true;
          }
        });
      });
      this.days = days;
      var today = new Date();
      this.today = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate()
      ).getTime();
    }
    this.onDateChange(this.date)
  }
};
</script>
<style lang="scss">
.rx-day {
  font-size: 13px;

  .weekitem {
    color: #999999;
    text-align: center;
  }
  .week {
    // background-color: #f2f6fc;
    &.hoverable:hover td {
      & .day {
        background-color: #f2f6fc;
      }
      &:last-child .day {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
      }
      &:first-child .day {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      }
    }
  }
  .day {
    display: inline-block;
    width: 24px;
    line-height: 20px;
    text-align: center;
    margin: 2px 0;
    cursor: pointer;

    &.weekend {
      color: #ff7b4d;
    }
    &.today {
      color: #6580ff;
    }
    &.another {
      color: #d8d8d8;
    }
    &:hover,
    &.hover {
      background-color: #f1f5ff;
    }
    &.choosed {
      color: #fff;
      background-color: #6580ff;
      border-radius: 2px;
    }
    &.disabled {
      color: #d8d8d8 !important;
      cursor: not-allowed !important;

      &:hover {
        background-color: #fff !important;
      }
    }
  }
}
</style>

